<template>
  <div style="" class="overflowY">
    <div class="el-col el-col-6 height100">
      <div slot="header" class="clearfix act-title">
        <span class="span-title">流程环节列表</span>
      </div>
      <div style="border: 1px solid #ccc;padding:0px 0px 0px 0px;margin:5px 5px 5px 5px;">
        <el-table
          :height="350"
          ref="actTable"
          :data="actData"
          tooltip-effect="dark"
          @row-contextmenu="rowContextmenu"
          @cell-dblclick="cellClick"
          @row-click="rowClick"
          @current-change="handleCurrentChange"
          :highlight-current-row="true"
          :show-header="true"
          style="width: 100%"
          class="myActTable"
        >
          <el-table-column
            prop="actName"
            align="left"
            :show-overflow-tooltip="showOverflowTooltip"
            label="">
            <template slot-scope="scope">
              <span>{{scope.row.actName}}（{{scope.row.actId}}）</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="el-col el-col-18 height100" v-if="actId">
      <div slot="header" class="clearfix act-title">
        <el-button type="primary" size="mini" class="size" @click="createSave"><i class="el-icon-setting el-icon--left"></i>保存配置</el-button>
      </div>
      <div style="border: 1px solid #ccc;padding:0px 0px 0px 0px;margin:5px 5px 5px 5px;">
        <el-table
          ref="buttonTable"
          :data="buttonInitData"
          :row-key="getRowKeys"
          tooltip-effect="dark"
          @row-contextmenu="rowContextmenu"
          @cell-dblclick="cellClick"
          @row-click="buttonRowClick"
          @current-change="handleCurrentChange"
          highlight-current-row
          height="350"
          style="width: 100%">
          <el-table-column
            type="selection"
            align="center"
            width="40">
          </el-table-column>
          <el-table-column
            width="50"
            align="center"
            label="序号">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="buttonName"
            align="left"
            :show-overflow-tooltip="showOverflowTooltip"
            label="按钮名称">
          </el-table-column>
          <el-table-column
            width="200"
            prop="buttonId"
            align="left"
            :show-overflow-tooltip="showOverflowTooltip"
            label="按钮ID">
          </el-table-column>
          <el-table-column
            width="200"
            prop="desc"
            align="left"
            :show-overflow-tooltip="showOverflowTooltip"
            label="备注">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'busiTypeProcessActButton',
  data() {
    return {
      showOverflowTooltip: true,
      buttonInitData: [
        { 'buttonName': '提交', 'buttonId': '1007_doSubmit', 'desc': '提交' },
        // { 'buttonName': '前加签', 'buttonId': '1010_doAddSigner', 'desc': '前加签' },
        { 'buttonName': '同意', 'buttonId': '1020_doPass', 'desc': '审核通过' },
        // { 'buttonName': '签收', 'buttonId': '1040_doSignReceiving', 'desc': '签收' },
        // { 'buttonName': '审阅', 'buttonId': '1030_doReview', 'desc': '审核通过' },
        { 'buttonName': '会签', 'buttonId': '1035_countersign', 'desc': '审核通过' },
        // { 'buttonName': '同意', 'buttonId': '1040_doRushToSign', 'desc': '抢签' },
        // { 'buttonName': '已阅', 'buttonId': '1050_doRead', 'desc': '完成当前环节，并结束流程' },
        // { 'buttonName': '安排', 'buttonId': '1055_doArrange', 'desc': '安排' },
        // { 'buttonName': '签批办结', 'buttonId': '1060_doSignAndApprove', 'desc': '完成当前环节，并结束流程' },
        // { 'buttonName': '督办完结', 'buttonId': '1080_doOverseeEnd', 'desc': '督办完结' },
        // { 'buttonName': '继续反馈', 'buttonId': '1009_doContinueFeedBack', 'desc': '继续反馈' },
        // { 'buttonName': '公文流转', 'buttonId': '1110_doDocumentCirculation', 'desc': '相当于前加签' },
        // { 'buttonName': '请拟稿人部长签批', 'buttonId': '1140_doPersonDepartmentEndorse', 'desc': '请拟稿人部长签批' },
        // { 'buttonName': '请领导签批', 'buttonId': '1120_doLeaderSigning', 'desc': '请领导签批，完成当前待办任务，并流转到下一环节' },
        // { 'buttonName': '请董事长签批', 'buttonId': '1130_doChairmanSigning', 'desc': '请董事长签批，完成当前待办任务，并流转到下一环节' },
        // { 'buttonName': '财务部会签', 'buttonId': '1130_doFinancialCountersign', 'desc': '财务部会签' },
        // { 'buttonName': '授权会签', 'buttonId': '1130_doAuthorizedCountersign', 'desc': '授权会签' },
        { 'buttonName': '驳回', 'buttonId': '2010_doReject', 'desc': '驳回到申请人' },
        { 'buttonName': '驳回', 'buttonId': '2020_doRejectoFree', 'desc': '驳回到已审核环节' },
        // { 'buttonName': '撤销', 'buttonId': '2030_doUndo', 'desc': '撤销' },
        // { 'buttonName': '套红', 'buttonId': '3010_doRedSet', 'desc': '套红' },
        // { 'buttonName': '编辑', 'buttonId': '3020_doEdit', 'desc': '编辑业务数据' },
        // { 'buttonName': '填写回车单', 'buttonId': '3025_doFillForm', 'desc': '填写回车单' },
        // { 'buttonName': '归档', 'buttonId': '3030_doArchive', 'desc': '数据归档' },
        // { 'buttonName': '打印', 'buttonId': '3040_doPrint', 'desc': '打印' },
        // { 'buttonName': '导出', 'buttonId': '3050_doExport', 'desc': '导出' },
        // { 'buttonName': '分发', 'buttonId': '4010_doDistribute', 'desc': '分发' },
        // { 'buttonName': '分发', 'buttonId': '4012_doDistributePass', 'desc': '分发走流程' },
        // { 'buttonName': '发布到集团门户', 'buttonId': '4020_doPublishGroupPortal', 'desc': '发布到集团门户' }
      ],
      actData: [], // 节点列表数据
      tableData: [], // 列表数据
      actId: '',
      selectRecord: {}
    }
  },
  props: ['componentArgs'],
  watch: {

  },
  computed: {

  },
  filters: {

  },
  components: {
  },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {
    this.getProcAct()
  },
  mounted() {
    // this.fetchData()
  },
  methods: {
    rowClick(row, event, column) {
      // 行单击事件
      this.getActButton(row)
    },
    buttonRowClick(row, event, column) {
      // 行单击事件
    },
    cellClick(row, column, cell, event) {
      // 列单击事件
    },
    rowContextmenu(row, column, e) {
      // 右键菜单
      window.event.returnValue = false
    },
    fetchData() { // 获取内容
    },
    getRowKeys(row) {
      return row.buttonId
    },
    getProcAct() {
      //
      let args = {}
      args.procId = this.componentArgs.procId
      this.$store.dispatch('WfBusiProcActSelect', args)
        .then(res => {
          this.actData = res.data
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            type: 'warning',
            message: '查询流程环节列表异常！'
          })
        })
      this.actId = ''
    },
    getActButton(args) {
      this.actId = args.actId
      if (this.$refs.buttonTable) {
        this.$refs.buttonTable.clearSelection()
      }

      let queryArgs = {}
      queryArgs.busiTypeProcId = this.componentArgs.busiTypeProcId
      queryArgs.actId = this.actId
      this.$store.dispatch('WfBusiProcButtonSelect', queryArgs)
        .then(res => {
          if (res.success) {
            let records = res.data.records
            records.forEach((item, index) => {
              const tempButtonId = item.buttonId
              this.buttonInitData.forEach((buttonInfo, index2) => {
                if (tempButtonId === buttonInfo.buttonId) {
                  this.$refs.buttonTable.toggleRowSelection(buttonInfo, true)
                }
              })
            })
          } else {
            this.$message({
              type: 'warning',
              message: '查询按钮异常！'
            })
          }
        }).catch((err) => {
          console.log(err)
          this.$message({
            type: 'warning',
            message: '查询配置按钮异常！'
          })
        })
    },
    handleCurrentChange(currentRow, oldCurrentRow) {
      //
    },
    createSave() {
      if (!this.actId) {
        this.$message({
          type: 'warning',
          message: '请选择流程环节！'
        })
        return
      }
      let buttonList = []
      let selection = this.$refs.buttonTable.selection
      if (selection && selection.length > 0) {
        selection.forEach((item, index) => {
          //
          let buttonInfo = {}
          buttonInfo.buttonId = item.buttonId
          buttonInfo.buttonName = item.buttonName
          buttonList.push(buttonInfo)
        })
      }

      let args = {}
      args.busiTypeProcId = this.componentArgs.busiTypeProcId
      args.actId = this.actId
      args.buttonList = buttonList
      if (!buttonList || buttonList.length <= 0) {
        this.$confirm('选择的按钮为空，确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doSave(args)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消保存'
          })
        })
      } else {
        this.doSave(args)
      }
    },
    doSave(args) {
      this.$store.dispatch('WfBusiProcButtonInsert', args).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
        } else {
          this.$message({
            type: 'warning',
            message: '保存失败！' + res.message
          })
        }
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'error',
          message: '保存配置异常！'
        })
      })
    }
  }
}
</script>
<style scoped>
  .height100{
    border-right: 1px solid #ccc;
  }
  .size{
    padding:2px 4px 2px 4px;
  }
  .act-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid#ccc;
  }
  .act-detail{
    padding: 10px 0 80px 15px;
  }
  .myActTable >>> .el-table__header-wrapper {
    display: none !important;
  }
</style>

